<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.11.3.min.js"></script>
    <style>
        .main {
    width: 1280px;
    height: 300px;
    background-color: #7FFFD4;
    float: left;
}
 
.left {
    float: left;
    width: 20%;
    height: 80%;
    background-color: yellow;
}
 
.right {
    float: right;
    width: 80%;
    height: 84%;
    background-color: lightblue;
}
 
.rightContent{
    height: inherit;
    text-align: center;
    vertical-align: bottom;
}
 
 
.leftBottom {
    margin-top: 60px;
}
 
.leftBottom1 {
    height: 60px;
    background-color: #00FF00;
    border-top: 3px solid #FF0000;
}
 
.leftBottom2 {
    height: 60px;
    background-color: #FF00FF;
    border-top: 3px solid #FF0000;
}
 
.leftBottom3 {
    height: 60px;
    background-color: #FFE4E1;
    border-top: 3px solid #FF0000;
    border-bottom: 3px solid #FF0000;
}
 
.navDescription {
    float: left;
    padding-top: 17px;
    padding-left: 95px;
}
 
.navImg {
    float: right;
    height: 100%;
    cursor: pointer;
}
.contentStyle{
    padding-top: 18px;
    padding-left: 70px;
    cursor: pointer;
}
    </style>
</head>
<body>
    <div id="main" class="main">
        <div id="left" class="left">
            <div id="leftTop" class="leftTop">
                <div id="navDescription" class="navDescription">left</div>
                <div id="navImg" class="navImg">
                    <img src="https://images2015.cnblogs.com/blog/989711/201611/989711-20161120160808310-1175723595.png">
                </div>
            </div>
            <div id="leftBottom" class="leftBottom">
                <div class="leftBottom1">
                    <div id="leftBottom1" class="contentStyle">leftBottom1</div>
                </div>
                <div class="leftBottom2">
                    <div id="leftBottom2" class="contentStyle">leftBottom2</div>
                </div>
                <div class="leftBottom3">
                    <div id="leftBottom3" class="contentStyle">leftBottom3</div>
                </div>
            </div>
        </div>
        <div id="right" class="right">
            <div id="rightContent" class="rightContent">right</div>
        </div>
    </div>
    <script >
    function toLeft() {
        $(".left").css({
            "width" : "2.5%"
        });
        $(".left .navDescription").css({
            "display" : "none"
        });
        $("img").attr({
            "src" : "https://images2015.cnblogs.com/blog/989711/201611/989711-20161120160823685-1303632912.png"
        });
        $(".right").css({
            "width" : "97.5%"
        });
        $("img").attr({
            "onclick" : "toRight();"
        });
    }
    function toRight() {
        $(".left").css({
            "width" : "20%"
        });
        $(".right").css({
            "width" : "80%"
        });
        $(".left .navDescription").css({
            "display" : "block"
        });
        $("img").attr({
            "src" : "toLeft.png"
        });
        $("img").attr({
            "onclick" : "toLeft();"
        });
    }
    function showLeftContentToRight(content){
        var text = $(content).text();
        $(".rightContent").text(text);
    }
    $(function() {
        if ("toLeft.png" === $("img").attr("src")) {
            $("img").attr({
                "onclick" : "toLeft();"
            });
        }
        $("#leftBottom1").attr({"onclick":"showLeftContentToRight('#leftBottom1');"});
        $("#leftBottom2").attr({"onclick":"showLeftContentToRight('#leftBottom2');"});
        $("#leftBottom3").attr({"onclick":"showLeftContentToRight('#leftBottom3');"});
    });
    </script>
</body>
</html>